<template>
  <div class="select-workflow-template-wrapper">
    <span class="search-condition-item-label"
          :title="attr.title">{{ attr.title ? attr.title : ''
    }}</span>
    <div class="search-condition-item-widget"
         :title="text">
      <a-input :readonly="true"
               v-model="text"
               :placeholder="attr.placeholder"></a-input>
      <div class="select-workflow-template-mask"
           @click="selectFlowTemplate"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SCSelectWorkFlowTemplate',
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          placeholder: '',
          managerType: 'formAdmin'
        }
      },
      value: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        text: this.value?.text
      };
    },
    watch: {
      value(newVal) {
        this.text = newVal && newVal.text;
      }
    },
    methods: {
      selectFlowTemplate() {
        if (this.attr.managerType == 'formAdmin') {
          this.templateChoose('2', true, '', 'Cap3AndCap4', '', null, null, null, this.value, 50);
        } else {
          var params = {};
          params.state = '0,1';
          params.hasAuth = 'false';
          params.isAll = 'true';
          this.templateChoose(
            '1,2',
            true,
            '',
            'MaxScope',
            '',
            null,
            null,
            null,
            this.value,
            50,
            null,
            null,
            null,
            null,
            {
              state: '0,1',
              hasAuth: 'false',
              isAll: 'true'
            }
          );
        }
      },
      templateChoose(
        moduleType,
        isMul,
        accountId,
        scope,
        excludeTemplateIds,
        reportId,
        isCanSelectCategory,
        isComponent,
        backfillData,
        maxSelect,
        memberId,
        showOldEdocTemplate,
        templateTypes,
        opeEdocRoot,
        params
      ) {
        var ur = '/seeyon/template/template.do?method=templateChooseMul';
        if (typeof isComponent == 'undefined' || isComponent == null || isComponent == '') {
          ur += '&isComponent=Y';
        } else {
          ur += '&isComponent=' + isComponent;
        }
        if (typeof moduleType != 'undefined' && moduleType != null) ur += '&moduleType=' + moduleType;
        if (typeof isMul != 'undefined' && isMul != null) ur += '&isMul=' + isMul;
        if (typeof accountId != 'undefined' && accountId != null) ur += '&accountId=' + accountId;
        if (typeof scope != 'undefined' && scope != null) ur += '&scope=' + scope;
        if (typeof excludeTemplateIds != 'undefined' && excludeTemplateIds != null)
          ur += '&excludeTemplateIds=' + excludeTemplateIds;
        if (typeof reportId != 'undefined' && reportId != null) ur += '&reportId=' + reportId;
        if (typeof isCanSelectCategory != 'undefined' && isCanSelectCategory != null)
          ur += '&isCanSelectCategory=' + isCanSelectCategory;
        if (typeof memberId != 'undefined' && memberId != null) {
          ur += '&memberId=' + memberId;
        }
        if (typeof showOldEdocTemplate != 'undefined' && showOldEdocTemplate != null) {
          ur += '&showOldEdocTemplate=' + showOldEdocTemplate;
        }
        if (typeof templateTypes != 'undefined' && templateTypes != null) {
          ur += '&templateTypes=' + templateTypes;
        }
        if (typeof opeEdocRoot != 'undefined' && opeEdocRoot != null) {
          ur += '&opeEdocRoot=' + opeEdocRoot;
        }
        if (typeof params != 'undefined' && params != null) {
          if (typeof params.state != 'undefined' && params.state != null) {
            ur += '&state=' + params.state;
          }
          if (typeof params.hasAuth != 'undefined' && params.hasAuth != null) {
            ur += '&hasAuth=' + params.hasAuth;
          }
          if (typeof params.isAll != 'undefined' && params.isAll != null) {
            ur += '&isAll=' + params.isAll;
          }
          if (typeof params.hasAppLinkTemplate != 'undefined' && params.hasAppLinkTemplate != null) {
            ur += '&hasAppLinkTemplate=' + params.hasAppLinkTemplate;
          }
        }
        if (typeof canShowForm != 'undefined' && canShowForm != '') {
          ur = ur + '&canShowForm=' + canShowForm;
        } else {
          ur = ur + '&canShowForm=true';
        }
        const self = this;
        const dialog = $.dialog({
          url: ur,
          title: '选择模板', //选择模版
          width: 760,
          height: 500,
          transParams: { _tids: backfillData?.value || '', _tnames: backfillData?.text || '' },
          targetWindow: getCtpTop(),
          buttons: [
            {
              isEmphasize: true,
              text: '确定', //确定
              handler: function () {
                const result = dialog.getReturnValue();
                if (result['ids'].length < 1) {
                  //您至少需要选择一个模版!
                  $.alert('您至少需要选择一个模版!');
                  return;
                }
                if (maxSelect) {
                  var arrIds = result['ids'].split(',');
                  if (arrIds.length > maxSelect) {
                    //超出了最大选择模板数量范围提示
                    $.alert($.i18n('template.templateChoose.maxQuantity', arrIds.length, maxSelect));
                    return;
                  }
                }
                self.selectFlowTemplateCallback(result);
                dialog.close();
              }
            },
            {
              text: '取消', //取消
              handler: function () {
                dialog.close();
              }
            }
          ],
          minParam: {
            show: false
          },
          maxParam: {
            show: false
          }
        });
      },
      selectFlowTemplateCallback({ ids, names }) {
        const { attr } = this;
        const key = attr?.key || '';
        this.$emit('valueChange', { key, value: { value: ids, text: names } });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .select-workflow-template-wrapper {
    .search-condition-item-widget {
      cursor: pointer;
      position: relative;
      display: flex;

      .select-workflow-template-mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        background: transparent;
      }
    }
  }
</style>
